<template>

    <div class="toady-focus" :class="{ 'is-mobile': $isMobile }">
        <div class="toady-focus-title">
            <div>今日聚集</div>
        </div>
        <div class="bannerList">
            <el-carousel indicator-position="none" :height="$isMobile ? '240px' : '500px'" :arrow="arrow">
                <el-carousel-item v-for=" item  in  bannerList " :key="item.url" :interval="5000"
                    @click.native="handleBannerClick(item)">
                    <el-image :src="item.bannerUrl" fit="fill" class="img-banner" />
                    <div class="title">{{ item.title }}</div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>

</template>

<script>
export default {

    data() {
        return {
            bannerList: [],

        }
    },

    computed: {
        arrow() {
            if (this.$isMobile) {
                return 'never'
            }
            if (this.bannerList && this.bannerList.length > 1) {
                return 'hover'
            } else {
                return 'never'
            }
        }
    },

    mounted() {
        this.init();
    },

    methods: {
        async init() {
            const { data: bannerList } = await this.$fetch.get(`/api/banner/list`);
            this.bannerList = bannerList;
        },
        handleBannerClick(item) {
            window.open(item.linkUrl);
        },
    }
}
</script>

<style lang="less" scoped>
.toady-focus {
    background: #fff;
    flex: 1;
    margin-right: 20px;
    padding: 20px 25px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;

    .toady-focus-title {
        height: 38px;
        display: flex;
        justify-content: space-between;
        padding-bottom: 12px;
        border-bottom: 1px solid #efefef;
        margin-bottom: 21px;

        div {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 25px;
            color: #333333;
            line-height: 36px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        span {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #3268ae;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            cursor: pointer;
        }
    }

    .bannerList {
        position: relative;
        flex: 1;

        .img-banner {
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        .title {
            position: absolute;
            bottom: 0px;
            height: 30px;
            display: flex;
            align-items: center;
            background: #f5f5f5;
            // opacity: 0.9;
            color: #3268ae;
            font-size: 14px;
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            cursor: pointer;
            padding-left: 20px;
        }
    }

}

.toady-focus.is-mobile {
    width: 100%;
    margin: 0;
    padding: 10px;

    .toady-focus-title {
        padding: 0;
        margin-bottom: 10px;

        div {
            font-size: 20px;
        }
    }

    .bannerList {
        .title {
            height: auto;
            padding-left: 10px;
            line-height: 20px;
            white-space: wrap;
        }
    }
}
</style>